 /*
 * @description: 学院数据
 * @Author: along
 * @Date: 2021-07-27
 * @Last Modified by: along
 * @Last Modified time: 2021-07-27
 */
<template>
    <div class="zsdxSocialCollege">
        <div class="__nav">
            <p class="__nav_title">
                学院数据
            </p>
        </div>

        <div class="header-nav">
            <div class="header_left">
                <div class="__info">
                    <p class="__info_title">学院名称</p>
                    <el-input
                        v-model="college_name"
                        placeholder="请输入学院名称"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                        :style="{width: '240px'}"
                    />
                </div>
            </div>
            <!--v2.1.6隐藏-->
            <!--<el-button
                size="small"
                :style="{width: '120px'}"
                type="primary"
                @click="jumpMajor()"
            >
                新增专业
            </el-button>-->
        </div>

        <div class="__table">
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                border
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    label="学院ID"
                    width="200px"
                    align="left"
                    prop="college_no"
                />
                <el-table-column
                    prop="college_name"
                    label="学院名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="student_num"
                    label="学院人数"
                    show-overflow-tooltip
                    align="left"
                />
                <!--v2.1.6隐藏-->
                <!--<el-table-column
                    prop="major_num"
                    label="专业数量"
                    align="left"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        <span
                            class="el-clum-num"
                            @click="fnSchoolClass(scope.row)"
                        >{{ scope.row.major_num ? scope.row.major_num : '&#45;&#45;' }}</span>
                    </template>
                </el-table-column>-->
                <!-- <el-table-column
                    prop="class_num"
                    label="班级数量"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span
                            class="el-clum-num"
                            @click="fnSchoolClass(scope.row)"
                        >{{ scope.row.class_num }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column
                    label="操作"
                    fixed="right"
                    :width="180"
                >
                    <template slot-scope="scope">
                        <span
                            class="curse-edit"
                            @click="fnEditname(scope.row)"
                        >编辑名称</span>
                        <!-- <span
                            class="curse-edit"
                            @click="fnAddClass(scope.row)"
                            :style="{
                                margin: '0 8px 0 8px'
                            }"
                        >新增专业</span> -->
                        <span
                            class="curse-edit"
                            @click="fnDeleteSchool(scope.row)"
                            :style="{
                                color: 'rgba(249, 91, 86, 1)',
                                margin: '0 0px 0 12px'
                            }"
                        >删除学院</span>
                        <!-- <span
                            class="curse-edit"
                            @click="fnAddClass(scope.row)"
                        >新增班级</span> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- dialog -->
        <el-dialog
            title="编辑学院名称"
            width="530px"
            custom-class="schedule-dialog"
            :visible.sync="showEditDialog"
            class="__social_college_dialog"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleEditForm"
            >
                <el-form-item
                    prop='name'
                    label="学院名称"
                >
                    <el-input
                        placeholder="请输入内容"
                        v-model="ruleForm.name"
                        size="medium"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    type="default"
                    @click="showEditDialog = false"
                    :style="{width: '100px', marginRight: '24px'}"
                >取消</el-button>
                <el-button
                    size="small"
                    type="primary"
                    @click="submitEditForm('ruleEditForm')"
                    :style="{width: '100px'}"
                >确定</el-button>
            </div>
        </el-dialog>
        <!-- dialog -->

        <!-- 不可删除弹窗 -->
        <show-dialog
            ref="showDialog"
            :dialog="showDialog"
            :width="360"
            :cancel-text="showDialogType == 2 ? '取消' : ''"
            :confirm-text="showDialogType == 2 ? '确认' : '我知道了'"
            :title="'温馨提示'"
            :content="showDialogText"
            @close="showDialog = false"
            @emit="emitFun"
        />
    </div>
</template>

<script>
import {back} from "@/mixin/back";
import showDialog from '@/components/common/dialog.vue';
export default {
    mixins: [back],
    components: {
        showDialog
    },
    data () {
        return {
            school_id: '',
            college_no: '',
            tableData: [],
            showEditDialog: false,
            college_name: '',//学院名称搜索
            ruleForm: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入学校名称', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ]
            },
            showDialog: false,
            showDialogText: '',
            showDialogType: 1,//1:不可删除 2:可删除
        };
    },
    mounted () {
        const arg = this.$route.query;

        if (arg['school_id'] !== undefined) {
            this.school_id = arg['school_id'];
        }

        this.$store.commit('SET_HEADER', [{title: "APP后台",},{title: '社交'},{title: "学院数据"}]);

        this.getTableData();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/region_college%5Cget_list', {
                school_id: this.school_id,
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                }
            });
        },

        /**
         * @description 提交学院数据
         */
        submitEditForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/region_college%5Cupdate', {
                        college_no: this.college_no,
                        college_name: this.ruleForm['name']
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            });
                            this.showEditDialog = !this.showEditDialog;
                            this.getTableData(1);
                        }
                        if (resp.code == 0) {
                            this.$message({
                                type: 'warning',
                                messaeg: resp.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * @description 编辑学院
         */
        fnEditname (row) {
            const college_no = row.college_no;

            this.college_no = college_no;
            this.showEditDialog = !this.showEditDialog;

            this.$post('/student/region_college%5Cget', {
                college_no
            }, resp => {
                if (resp.code == 1) {
                    this.ruleForm = {
                        name: resp.data.college_name
                    };
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'warning',
                        messaeg: resp.msg
                    });
                }
            });
        },

        /**
         * @description 删除学院
         */
        fnDeleteSchool (row) {
            this.college_no = row.college_no;//记录学院编号
            this.showDialogType = row.student_num ? 1 : 2;
            this.showDialogText = row.student_num ? '该专业有用户，不可删除，请联系技术人员进行操作' : '是否要删除该专业';
            this.showDialog = true;

            // const college_no = row.college_no;
            // const student_num = row.student_num;

            // if (student_num == 0) {
            //     this.$confirm('是否要删除该学院', '提示', {
            //         confirmButtonText: '确认',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         this.$post('/student/region_college%5Cdelete', {
            //             college_no
            //         }, resp => {
            //             if (resp.code == 1) {
            //                 this.$message({
            //                     type: 'success',
            //                     message: '删除成功'
            //                 });
            //                 this.getTableData(1);
            //             }
            //             if (resp.code == 0) {
            //                 this.$message({
            //                     type: 'warning',
            //                     message: resp.msg
            //                 });
            //             }
            //         });
            //     });
            // } else {
            //     this.$confirm('该学院有用户，不可删，请联系技术人员进行操作', '提示', {
            //         confirmButtonText: '确认',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     });
            // }
        },

        /**
         * @description 删除专业弹窗确定
         */
        emitFun () {
            if(this.showDialogType === 1) {
                this.showDialog = false;
            } else if (this.showDialogType === 2) {
                this.$post('/student/region_college%5Cdelete', {
                    college_no: this.college_no
                }, resp => {
                    if (resp.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                        this.getTableData(1);
                    }
                    if (resp.code == 0) {
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }
        },

        /**
         * @description 新增专业
         */
        fnAddClass (row) {
            let routeData = this.$router.resolve({
                name: 'socialMajorAdd',
                query: {
                    city_id: row.city_id,
                    school_id: row.school_id,
                    college_no: row.college_no
                }
            });

            window.open(routeData.href, '_blank');
        },

        jumpMajor () {
            let routeData = this.$router.resolve({
                name: 'socialMajorAdd',
                query: {
                    // city_id: row.city_id,
                    school_id: this.$route.query.school_id,
                    // college_no: row.college_no
                }
            });

            window.open(routeData.href, '_blank');
        },

        /**
         * @description 专业数据
         */
        fnSchoolClass (row) {
            // let routeData = this.$router.resolve({
            //     name: 'socialMajor',
            //     query: {
            //         school_id: row.school_id,
            //         college_no: row.college_no
            //     }
            // });

            // window.open(routeData.href, '_blank');

            this.$router.push({
                name: 'socialMajor',
                query: {
                    school_id: row.school_id,
                    college_no: row.college_no
                }
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .zsdxSocialCollege {
        background-color: #fff;
        // padding: 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 12px;
        width: calc(100% - 24px);
        overflow: hidden;

        .__nav {
            width: 100%;
            min-height: 67px;
            display: flex;
            align-items: center;
            border-bottom: 1px rgba(240, 242, 245, 1) solid;
            box-sizing: border-box;
            padding-left: 35px;
            .__nav_title {
                color: rgba(51, 51, 51, 1);
                font-size: 20px;
                font-weight: 500;
                position: relative;
                &::before {
                    content: '';
                    width: 3px;
                    height: 20px;
                    background-color: rgba(24, 144, 255, 1);
                    position: absolute;
                    left: -8px;
                    top: -1px;
                    z-index: 100;
                }
            }
        }

        .__table {
            margin: 12px 32px 15px 32px;
            flex: 1;
        }

        .pagination-wrapper {
            padding-top: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
        .curse-edit {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        .dialog-footer {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header-nav {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 32px;
            .header_left {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-top: 24px;
            }
            .__info {
                display: flex;
                align-items: center;
                margin-right: 32px;
                margin-bottom: 12px;
                .__info_title {
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    margin-right: 12px;
                    white-space: nowrap;
                }
            }
            .__left_button {
                flex: 1;
                height: 36px;
                background: rgba(32, 160, 255, 0.1);
                border-radius: 4px;
                border: 1px solid #20A0FF;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                // margin-right: 32px;
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                font-weight: 500;
                .el-icon-hand-iconjia {
                    color: rgba(32, 160, 255, 1);
                    margin-right: 10px;
                    font-size: 14px;
                    font-weight: 500;
                }
            }
            .__right_button {
                width: 128px;
                height: 36px;
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #20A0FF;
                text-align: center;
                line-height: 36px;
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
            }
        }
        .dialog-footer {
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }
    .el-clum-num {
        color: rgb(64, 158, 255) !important;
        cursor: pointer;
    }
</style>
<style lang="less">
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .zsdxSocialCollege {
        .el-dialog__header {
            padding-top: 10px;
            box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;
            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }
            .el-icon-close:before {
                color: rgb(194,194,194);
                font-size: 17px;
                font-weight: bold;
            }
            .el-dialog__headerbtn {
                top: 14px;
            }
        }
        .__social_college_dialog {
            .el-dialog__body {
                padding-left: 64px;
                padding-right: 64px;
                padding-bottom: 10px;
            }
        }
    }
</style>
